// JavaScript Document

OpenLayers.Control.MonitorButton = 
  OpenLayers.Class(OpenLayers.Control, {

    /**  
     * Property: buttonText
     * {String}
     */
    buttonText: "Open",
	
	 /** 
     * Property: buttonDiv
     * {DOMElement} 
     */
    buttonDiv: null,
	
	/** 
     * Property: containerButtonDiv
     * {DOMElement} 
     */
    containerButtonDiv: null,
	
	/** 
     * Property: containerDiv
     * {DOMElement} 
     */
    containerDiv: null,
	
	/** 
     * Property: isTilt
     * {boolean} 
     */
	isTilt: false,
	
	/** 
     * SIZE AND POSITIONS of BUTTON
     */
	top: '10px',
	left: '',
	right: '13px',
	width: '84px',
	 
     initialize: function(options) {
        OpenLayers.Control.prototype.initialize.apply(this, arguments);
    },
	
	 /**
     * Method: draw
     *
     * Returns:
     * {DOMElement} 
     */  
    draw: function() {
        OpenLayers.Control.prototype.draw.apply(this);

        // create layout divs
        this.loadContents();  

        return this.div;
    },
	
	/** 
     * Method: ignoreEvent
     * 
     * Parameters:
     * evt - {Event} 
     */
    ignoreEvent: function(evt) {
        OpenLayers.Event.stop(evt);
    },
	
	/** 
     * Method: mouseDown
     *
     * Parameters:
     * evt - {Event}
     */
    mouseDown: function(evt) {
        this.isMouseDown = true;
        this.ignoreEvent(evt);
    },

    /** 
     * Method: mouseUp
     *  
     * Parameters:
     * evt - {Event} 
     */
    mouseUp: function(evt) {
        if (this.isMouseDown) {
            this.isMouseDown = false;
            this.ignoreEvent(evt);
        }
    },

	 /** 
     * Method: loadContents
     *
     */
    loadContents: function() {

        //configure main div
        this.div.style.position = "absolute";
		this.div.style.top = this.top;
        this.div.style.right = this.right;
        this.div.style.left = this.left; 
		this.div.style.backgroundColor = "transparent";
		
		OpenLayers.Event.observe(this.div, "mouseup", OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
        OpenLayers.Event.observe(this.div, "click", this.ignoreEvent);
        OpenLayers.Event.observe(this.div, "mousedown", OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
        OpenLayers.Event.observe(this.div, "dblclick", this.ignoreEvent);
		
		// button div        
        this.buttonDiv = document.createElement("div");
        this.buttonDiv.id = this.id + "_buttonDiv";
		
		with (this.buttonDiv.style) {
		  	borderRight = "1px solid #B0B0B0";
		  	borderBottom = "1px solid #B0B0B0";
		  	paddingTop = "1px";
		  	paddingLeft = "4px";
		    textAlign = "left";
		    fontSize = "12px";
		    fontFamily = "Arial";
		    fontWeight = "Bold";
		    background = "#FFFFFF";
		    backgroundImage = "url('images/ledOFF.gif')";
		    backgroundRepeat = "no-repeat";
		    backgroundPosition = "right";
		    width = (parseInt(this.width)-5)+'px';
		    cursor = "pointer";
		}
		this.buttonDiv.innerHTML = this.buttonText;
		OpenLayers.Event.observe(this.buttonDiv, "click", 
            OpenLayers.Function.bindAsEventListener(this.changeVisibility, this)
        );
		
		// container Button
		this.containerButton = document.createElement("div"); 
		with (this.containerButton.style){
			width = this.width;
			border = "1px solid black";
		} 
		this.containerButton.appendChild(this.buttonDiv);
				
		this.div.appendChild(this.containerButton);
	},
	
	/** 
     * Method: alerta
     *
     */
    alerta: function() {
		if (this.containerDiv.isVisible) 
			this.buttonDiv.style.backgroundImage = "url('images/ledOFF.gif')";
		else
		 	this.buttonDiv.style.backgroundImage = "url('images/ledRedON.gif')";
	},
	
	/** 
     * Method: redraw
     *
     */
    redraw: function() {
		this.containerDiv.redraw();
	},
	
	setContainer: function(container){
		this.containerDiv = container;
	},
	
	/** 
     * Method: hideContainer
     * Oculta el contenedor colapsable
     * 
     */
	hideContainer: function(){
		this.containerDiv.hide(); 
	},
	
	/** 
     * Method: showContainer
     * Muestra el contenedor colapsable
     * 
     */
	showContainer: function(){
		this.containerDiv.show();
	},

	/** 
     * Method: changeVisibility
     * Oculta o muestra el contenedor colapsable, dependiendo del estado actual
     * 
     */
	changeVisibility: function(){
		if (!this.containerDiv.isVisible)
			this.buttonDiv.style.backgroundImage = "url('images/ledOFF.gif')";
		this.containerDiv.changeVisibility();
	},
	
	
	CLASS_NAME: "OpenLayers.Control.MonitorButton"

});